<script lang="ts" setup>
import useTable from '@/hooks/useTable'
import { get, post, message, loadFile, formatEnum } from '@/utils'
import { TableColumnData } from '@arco-design/web-vue'
import { ProductStatus, ProductClient } from '@/enum/product'
import Product from '@/components/SelectModal/Product.vue'
import useModal from '@/hooks/useModal'
import cloneDeep from 'lodash/cloneDeep'
const props = defineProps<{
  val: any[]
  selectType: 'radio' | 'checkbox'
}>()
console.log('🚀 ~ props:', props)
const emit = defineEmits(['update:val'])
const { formatColumns } = useTable()
const { store } = useModal()
const tableData = ref<any[]>(props.val)
const ids = computed(() => tableData.value.map(v => v.id) || [])
watch(
  () => props.val,
  n => {
    // tableData.value = n
  },
  { deep: true }
)
watch(
  () => tableData.value,
  n => {
    console.log('watch')

    const list: any = ref([])
    n.map(item => {
      list.value.push({
        id: item.id,
        name: item.name,
        img: item.img,
        goodsPrice: item.goodsPrice,
        createTime: item.createTime,
        stock: item.stock,
      })
    })
    emit('update:val', list)
  }
)
const columns = formatColumns(
  [
    { title: '商品图片', dataIndex: 'img', width: 90, valueType: 'image' },
    { title: '商品名称', dataIndex: 'name', width: 200, hideInSearch: false, ellipsis: true },
    {
      title: '商品价',
      dataIndex: 'goodsPrice',
      width: 100,
      valueType: 'money',
    },
    // { title: '点击量', dataIndex: 'clickNum', width: 100 },
    // {
    //   title: '评价数',
    //   dataIndex: 'commentNum',
    //   width: 100,
    // },
    // {
    //   title: '商品状态',
    //   dataIndex: 'status',
    //   width: 90,
    //   valueEnum: formatEnum(ProductStatus),
    // },

    // {
    //   title: '是否热门',
    //   dataIndex: 'isHot',
    //   width: 90,
    //   valueEnum: {
    //     1: { text: '是' },
    //     0: { text: '否' },
    //   },
    // },
    // {
    //   title: '是否推荐',
    //   dataIndex: 'isPush',
    //   width: 90,
    //   valueEnum: {
    //     1: { text: '是' },
    //     0: { text: '否' },
    //   },
    // },
    // { title: '销量', dataIndex: 'salesVolume', width: 90 },
    { title: '库存', dataIndex: 'stock', width: 90 },
    { title: '创建时间', dataIndex: 'createTime', width: 200 },
  ],
  { ellipsis: false }
) as TableColumnData[]
</script>
<template>
  <a-space style="max-width: 600px" direction="vertical">
    <a-button type="text" @click="store.handleShow({})">选择商品</a-button>
    <a-table :columns="columns" :data="tableData" header-title="" :pagination="false" :bordered="{ cell: true }" :scroll="{ x: 300 }">
      <template #img="{ record }">
        <a-image width="50" :src="record.img" />
      </template>
      <template #status="{ record }">
        {{ ProductStatus[record.status] }}
      </template>

      <template #op="{ record, rowIndex }">
        <a-button type="text" @click="tableData.splice(rowIndex, 1)">删除</a-button>
      </template>
    </a-table>
  </a-space>
  <Product v-if="store.show" v-model:show="store.show" :id="ids" type="checkbox" v-model:list="tableData" />
</template>
<style lang="less" scoped></style>
